<template>
  <div id="login">
    <div class="themel">
      <div class="body">
        <div class="left">
          <i
            ><svg
              @click="goback"
              t="1734089579125"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6403"
              width="16"
              height="16"
            >
              <path
                d="M748.8 160 390.4 512l358.4 352c19.2 19.2 19.2 57.6 0 76.8-19.2 19.2-57.6 19.2-76.8 0L281.6 556.8c0 0-6.4 0-6.4-6.4C262.4 544 256 524.8 256 512c0-12.8 6.4-32 19.2-38.4 0 0 6.4 0 6.4-6.4l390.4-390.4c19.2-19.2 57.6-19.2 76.8 0C774.4 102.4 774.4 134.4 748.8 160z"
                fill="#515151"
                p-id="6404"
              ></path></svg></i>
        </div>
        <div class="text">登录</div>
      </div>
      <div class="header">
        <div class="text">
          <div class="title">欢迎登陆</div>
          <div class="desc">乐淘一番</div>
        </div>
        <div class="login-bg">
          <img src="https://mall.leyifan.com/static/h5/new_images/login_bg.png" alt="" />
        </div>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="left-img">
            <img src="https://mall.leyifan.com/static/h5/new_images/login_user_icon.png" alt="" />
          </div>
          <input
            type="text"
            placeholder="请输入电话号码或邮箱"
            v-model="username"
            maxlength="140"
            step
            enterkeyhint="done"
            autocomplete="off"
          />
          <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
          <div class="right-img">
            <img src="https://mall.leyifan.com/static/h5/new_images/login_pwd_clear.png" alt="" />
          </div>
        </div>

        <div class="form-item">
          <div class="left-img">
            <img src="https://mall.leyifan.com/static/h5/new_images/login_pwd_icon.png" alt="" />
          </div>
          <input
            :type="isPasswoedVisible ? 'text' : 'password'"
            placeholder="请填写密码"
            maxlength="140"
            step
            enterkeyhint="done"
            autocomplete="off"
            v-model="password"
          />
          <div class="right-img">
            <img
              :src="
                isPasswoedVisible
                  ? 'https://mall.leyifan.com/static/h5/new_images/login_pwd_show.png'
                  : 'https://mall.leyifan.com/static/h5/new_images/login_pwd_hide.png'
              "
              @click="togglePasswordVisibility"
              alt="Toggle Password Visibility"
            />
            <img src="https://mall.leyifan.com/static/h5/new_images/login_pwd_clear.png" alt="" />
          </div>
        </div>
        <div class="tools"></div>
      </div>
      <div class="login-box">
        <div class="login-box-disabled">
          <button @click="login()">登录</button>
        </div>
        <div class="reg">
          <div class="text">
            <span @click="gotoregister">账号注册</span>
          </div>
          <div class="image">
            <img src="https://mall.leyifan.com/static/h5/new_images/icon_right.png" alt="" />
          </div>
        </div>
      </div>
      <div class="rede">
        <input type="checkbox" v-model="isChecked" />
        <div class="ags">
          <span>已阅读并同意</span>
          <a>《用户协议》</a>
          <span>及</span>
          <a>《隐私政策》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/useUserStore'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'

const userStore = useUserStore()
// 控制密码是否可见
const isPasswoedVisible = ref(false)
// 输入账号（电话或邮箱）
const username = ref('')
// 输入密码
const password = ref('')
// 复选框是否勾选
const isChecked = ref(false)
// 错误提示信息
const errorMessage = ref('')
// 正则表达式
const phoneOrEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$|^1[3-9]\d{9}$/

// 切换密码显示状态方法
const togglePasswordVisibility = () => {
  isPasswoedVisible.value = !isPasswoedVisible.value
}

// 监听账号输入
watch(username, (newValue) => {
  if (!phoneOrEmailRegex.test(newValue)) {
    errorMessage.value = '请输入正确的电话号码或邮箱'
  } else {
    errorMessage.value = ''
  }
})

const gotoregister = () => {
  router.replace('/hlfregister')
}

const goback = () => {
  router.go(-1)
}

const login = () => {
  if (!username.value || !password.value) {
    showToast('请输入账号和密码')
    return
  }
  if (!isChecked.value) {
    showToast('请先阅读并同意用户协议和隐私政策')
    return
  }

  // 检查本地存储中是否存在该用户信息
  const userString = localStorage.getItem('users')
  // 获取所有用户信息
  const users = userString ? JSON.parse(userString) : []
  // 查找用户信息
  const user = users.find((u) => u.username === username.value || u.email === username.value)
  if (!user) {
    // 如果本地存储中没有用户信息，则跳转到注册页面
    showConfirmDialog({
      title: '注册',
      message: '还没有账号？是否要注册。',
    })
      .then(() => {
        // on confirm
        router.replace('/hlfregister')
      })
      .catch(() => {
        // on cancel
        return
      })
    return
  }

  // 验证密码
  if (user.password === password.value) {
    showSuccessToast('登录成功')

    // 保存用户登录状态和信息
    // localStorage.setItem('isLoggedIn', 'true')
    // localStorage.setItem('userId', user.id)
    // localStorage.setItem('userName', user.username)
    userStore.login(user.id, user.username, user.email)
    router.go(-1)
  } else {
    showToast('账号或密码错误')
  }
}
</script>

<style scoped lang="less">
#login {
  width: 100%;
  .themel {
    width: 100%;
    height: 635rem;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(19rem + 13rem);
    background-size: 100% 250rem;
    background-image: url(https://mall.leyifan.com/static/h5/new_images/common_bg.png);
    background-repeat: no-repeat;
    .body {
      width: 375rem;
      height: 42rem;
      min-height: 42rem;
      .left {
        z-index: 100;
        position: absolute;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-left: 14rem;
        line-height: 42rem;
      }
      .text {
        text-align: center;
        flex: 1 1 0%;
        font-size: 17rem;
        color: rgb(51, 51, 51);
        font-weight: 700;
      }
    }
    .header {
      color: #333;
      height: 140rem;
      display: flex;
      flex-direction: column;
      position: relative;
      padding-top: 30rem;
      padding: 30rem 24rem 0;
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          font-size: 16rem;
          font-weight: 400;
          margin-bottom: 10rem;
          line-height: 16rem;
        }
        .desc {
          font-size: 28rem;
          font-weight: 700;
          line-height: 28rem;
        }
      }
      .login-bg {
        height: 140rem;
        width: 60rem;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
    .form {
      padding: 0 24rem;
      margin-top: 3rem;
      .form-item {
        margin-bottom: 30rem;
        display: flex;
        align-items: center;
        border-bottom: solid 2rem #f5f5f5;
        padding-bottom: 11rem;
        height: 42rem;
        position: relative;
        .error-message {
          position: absolute;
          color: red;
          font-size: 12rem;
          bottom: 0;
          left: 30rem;
        }
        input {
          background-color: transparent;
          min-height: 1.4em;
          border: 0;
          position: relative;
          width: 100%;
          height: 20rem;
          font-size: 12rem !important;
          line-height: 12rem !important;
          margin-left: 10rem;
          margin-bottom: 5rem;
        }
        .right-img {
          display: flex;
        }
        img {
          width: 21rem;
          height: 18rem;
          color: #aaabab;
        }
      }
    }
    .login-box {
      margin-top: 40rem;
      text-align: center;
      padding: 0 23rem;
      .login-box-disabled {
        width: 100%;
        height: 48rem;
        background-color: #ff3d58;
        border-radius: 24rem;
        font-size: 16rem;
        font-weight: 500;
        color: #fff;
        line-height: 48rem;
        button {
          width: 100%;
          height: 48rem;
          background-color: #ff3d58;
          border-radius: 24rem;
          font-size: 16rem;
          font-weight: 500;
          color: #fff;
          line-height: 48rem;
          border: 0;
        }
      }
      .reg {
        margin-top: 20rem;
        width: 100%;
        display: flex;
        padding: 0 23rem;
        width: 100%;
        font-size: 13rem;
        justify-content: center;
        transform: translateX(1rem);
        flex-wrap: wrap;
        .image {
          img {
            width: 10rem;
            height: 10rem;
          }
        }
      }
    }
    .rede {
      margin-top: 40rem;
      display: flex;
      align-items: center;
      padding: 0 23rem;
      width: 100%;
      color: #999;
      font-size: 13rem;
      transform: translateX(1rem);
      flex-wrap: wrap;
      .ags {
        // margin-top: 5rem;
      }
      input {
        border-radius: 50%;
      }
      span:nth-child(1) {
        margin-left: 7rem;
      }
    }
  }
}
</style>